<template>
  <div style="background: #fff">
    <div class="title">
      <div>{{ title }}</div>
    </div>
    <div style="padding: 1.875rem">
      <el-form :inline="true">
        <el-form-item label="">
          <el-input
            v-model="query.name"
            placeholder="商户名称/登录账号"
          ></el-input>
        </el-form-item>
        <el-form-item label="选择审核状态">
          <el-select
            v-model="query.status"
            placeholder="请选择"
            @change="getTwo"
            clearable
          >
            <el-option
              v-for="item in status"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开店提成状态">
          <el-select
            v-model="query.is_shop_draw"
            placeholder="请选择"
            @change="getTwo"
            clearable
          >
            <el-option
              v-for="item in is_shop_draw"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="一级分类">
          <el-select
            v-model="query.one_id"
            placeholder="请选择"
            @change="getTwo"
            clearable
          >
            <el-option
              v-for="item in one"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类">
          <el-select v-model="query.two_id" placeholder="请选择" clearable>
            <el-option
              v-for="item in two"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择城市" v-if="admin_type == 1">
          <el-select
            v-model="query.city_id"
            placeholder="请选择"
            @change="getArea"
            clearable
          >
            <el-option
              v-for="item in city"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择区县" v-if="admin_type == 1">
          <el-select v-model="query.area_id" placeholder="请选择" clearable>
            <el-option
              v-for="item in area"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="选择区县" v-if="admin_type == 3">
          <el-select v-model="query.area_id" placeholder="请选择" clearable>
            <el-option
              v-for="item in city"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="getData(true)">查询</el-button>
          <el-button @click="reset">重置</el-button>
          <!-- <el-button type="primary" @click="showEdit(-1)">添加</el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <div class="sta">商家总数：{{ pages.total }}</div>
    <el-table :data="data" stripe style="width: 100%; margin-bottom: 1.875rem">
      <el-table-column prop="id" label="id"></el-table-column>
      <el-table-column prop="name" label="登录账号"></el-table-column>
      <el-table-column prop="shop_name" label="商户名称"></el-table-column>
      <el-table-column prop="tc_price" label="开店提成"></el-table-column>
      <el-table-column label="一级分类">
        <template slot-scope="scope" v-if="scope.row.one">
          {{ scope.row.one.name }}
        </template>
      </el-table-column>

      <el-table-column label="二级分类">
        <template slot-scope="scope" v-if="scope.row.two">
          {{ scope.row.two.name }}
        </template>
      </el-table-column>
      <el-table-column label="所属城市">
        <template slot-scope="scope" v-if="scope.row.city">
          {{ scope.row.city.name }}
        </template>
      </el-table-column>
      <el-table-column label="所属区县">
        <template slot-scope="scope" v-if="scope.row.area">
          {{ scope.row.area.name }}
        </template>
      </el-table-column>

      <el-table-column label="所属客服">
        <template slot-scope="scope" v-if="scope.row.parent">
          {{ scope.row.parent.name }}
        </template>
      </el-table-column>
      <el-table-column prop="date" label="入驻时间"></el-table-column>

      <el-table-column label="状态">
        <template slot-scope="scope">
          {{ ["待审核", "通过", "拒绝"][scope.row.status - 1] }}
        </template>
      </el-table-column>
      <el-table-column prop="order_sum" label="订单数"></el-table-column>
      <el-table-column label="开店奖励">
        <template slot-scope="scope">
          {{ ["无", "可领取", "待审核", "已到账"][scope.row.is_shop_draw - 1] }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="small" @click="showEdit(scope.row.id)"
            >查看详情</el-button
          >
          <el-button
            type="error"
            size="small"
            @click="openShop(scope.row)"
            v-if="scope.row.is_shop_draw == 3 && admin_type == 1"
            >发放奖励</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pages.currentPage"
      :page-size="pages.per_page"
      layout="total,prev, pager, next"
      :total="pages.total"
      style="text-align: center"
    >
    </el-pagination>

    <!-- <el-dialog title="编辑" :visible.sync="editModal" width="30%">
        <el-form :model="item">
          <el-form-item label="登陆账号">
            <el-input v-model="item.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="item.pwd" autocomplete="off"></el-input>
          </el-form-item>
           <el-form-item label="单位">
            <el-input v-model="item.company" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="item.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="负责人">
            <el-input v-model="item.real_name" autocomplete="off"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editModal = false">取 消</el-button>
          <el-button type="primary" @click="edit">确 定</el-button>
        </div>
      </el-dialog> -->
  </div>
</template>

<script>
import mixin from "../../js/mixin";

export default {
  name: "homePage",
  mixins: [mixin],
  data() {
    return {
      is_check: false,
      is_page: true,
      api_url: "shop",
      one: [],
      two: [],
      status: [
        {
          id: 1,
          name: "待审核",
        },
        {
          id: 2,
          name: "已通过",
        },
        {
          id: 3,
          name: "已拒绝",
        },
      ],
      is_shop_draw: [
        {
          id: 1,
          name: "无",
        },
        {
          id: 2,
          name: "可领取",
        },
        {
          id: 3,
          name: "待审核",
        },
        {
          id: 3,
          name: "已到账",
        },
      ],
      item: {},
      query: {
        city_id: "",
        area_id: "",
        one_id: "",
        two_id: "",
        name: "",
      },
    };
  },
  components: {},
  mounted() {},
  created() {
    this.admin_type = localStorage.getItem("admin_type");
    this.title = this.$route.meta.title;
    this.init();
  },
  methods: {
    reset() {
      (this.query = {
        city_id: "",
        area_id: "",
        one_id: "",
        two_id: "",
        name: "",
      }),
        this.getData(true);
    },
    init() {
      this.getCate();
      this.getData();
      this.getCity();
    },
    getCate() {
      this.global.httpRequest("shop/cate", { p_id: 0 }).then((res) => {
        this.one = res;
      });
    },
    getTwo() {
      this.global
        .httpRequest("shop/cate", { p_id: this.query.one_id })
        .then((res) => {
          this.two = res;
          this.query.two_id = "";
        });
    },

    openShop(e) {
      this.$confirm("是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.global
            .httpRequest("shop/open", { id: e.id }, "post")
            .then((res) => {
              let { code } = res;
              if (code == 0) {
                this.$message({
                  type: "sucess",
                  message: "已删除",
                });
                this.getData(true);
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },

    showEdit(e) {
      let { href } = this.$router.resolve({
        name: "shopDetail",
        params: { id: e },
        query: {},
      });
      window.open(href, "_blank");
    },

    // getDocument() {
    //   this.global
    //     .httpRequest("document", { user_id: this.item.id })
    //     .then((res) => {
    //       this.document = res;
    //     });
    // },
  },
};
</script>

<style scoped>
.contents {
  padding: 1.875rem;
  display: flex;
  flex-wrap: wrap;
}

.dateTitle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.5rem;
}
.dateInfo {
  width: 18.5%;
  text-align: center;
  background: #fff;
  color: #6f737a;
  line-height: 3.75rem;
  cursor: pointer;
}
.saleDate {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.625rem;
}
.saleDate > div {
  width: 48.5%;
  padding: 2.5rem 0;
  background: #fff;
}
.saleDate > div > span {
  display: block;
  margin-left: 1.875rem;
  color: #6f737a;
  margin-bottom: 1.5rem;
}
.saleDate > div > div {
  margin-left: 1.875rem;
  color: #333;
  font-size: 1.5rem;
}

.goodsInfo {
  width: 13.5rem;
  padding: 1.25rem 0.75rem;
  display: flex;
  flex-direction: column;
}
.goodsInfo > div {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
}

.revenueInfo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.revenueInfo > span {
  color: #6f737a;
  margin-bottom: 1.5rem;
}
.revenueInfo > div {
  color: #333;
  font-size: 2rem;
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.titleInfo {
  display: flex;
  align-items: center;
  margin: 2rem 5rem;
  margin-left: 2rem;
}
</style>
